<template>
    <div style="padding-bottom:10px" :class="className" :id="id" :style="{height:height,width:width}"></div>       
</template>
<script>
// 引入 ECharts 主模块
const echarts = require('echarts/lib/echarts');

// 引入柱状和线状图
require('echarts/lib/chart/bar');
require('echarts/lib/chart/line');
// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
require('echarts/lib/component/dataZoom');
export default {
    name: 'homeWorkEchart',
    props: {
        className: {
            type: String,
            default: 'chart'
        },
        id: {
            type: String,
            default: 'chart'
        },
        width: {
            type: String,
            default: '200px'
        },
        height: {
            type: String,
            default: '200px'
        },
        homeWorkObj: {
            type: Object,
            require: true
        }
    },
    data() {
        return {};
    },
    watch: {
        homeWorkObj: {
            handler(val, oldVal) {
                if (val) {
                    this.setOptions();
                }
            },
            deep: true
        }
    },
    mounted() {
        this.initChart();
    },
    methods: {
        initChart() {
            this.chart = echarts.init(document.getElementById(this.id));
            this.setOptions()
        },
        setOptions() {
            this.chart.setOption({
                color: ['#37A2DA', '#ff7070'],
                grid: {
                    left: '2%',
                    right: '2%',
                    bottom: '7%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    // formatter: '{b}<br />{a}: {c0}<br />{a1}: {c1}%',
                    formatter(param) {
                        
                        if (param[1] && param[0]) {
                            return `${param[0].name}<br />${param[0].seriesName}：${param[0].value}<br/>${param[1].seriesName}：${param[1].value}%`;
                        } else if (param[0] && param[0].seriesName == '作业次数') {
                            return `${param[0].name}<br />${param[0].seriesName}：${param[0].value}`;
                        } else if (param[0] && param[0].seriesName == '作业完成率') {
                            return `${param[0].name}<br />${param[0].seriesName}：${param[0].value}%`;
                        } else {
                            return
                        }
                    },
                    axisPointer: {
                        type: 'cross',
                        crossStyle: {
                            color: '#999' 
                        }
                    }
                },
                legend: {
                    data: ['作业次数', '作业完成率']
                },
                dataZoom: [
                    {
                        show: this.homeWorkObj.gradeName.length > 15 ? true : false,
                        start: 0,
                        end: this.homeWorkObj.gradeName.length > 15 ? 50 : 100,
                        bottom: '12%'
                    }
                ],
                xAxis: [
                    {
                        type: 'category',
                        data: this.homeWorkObj.gradeName,
                        axisPointer: {
                            type: 'shadow'
                        },
                        axisLabel: { // 将X轴的文本标签全部显示
                            interval: 0, // 标签显示挑选间隔，默认为'auto'，可选为：'auto'（自动隐藏显示不下的） | 0（全部显示） |{number}（用户指定选择间隔） {function}函数回调，传递参数[index，data[index]]，返回true显示，返回false隐藏
                            rotate: 15 // 标签旋转角度，默认为0，不旋转，正值为逆时针，负值为顺时针，可选为：-90 ~ 90
                        }
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        name: '作业次数',
                        axisLabel: {
                            formatter: '{value}'
                        }
                    },
                    {
                        type: 'value',
                        name: '作业完成率',
                        axisLabel: {
                            show: true,
                            interval: 'auto',
                            formatter: '{value} %'
                        },
                        show: true
                    }
                ],
                series: [
                    {
                        name: '作业次数',
                        type: 'bar',
                        yAxisIndex: 0,
                        barWidth: '50%',
                        data: this.homeWorkObj.publishNum
                    },

                    {
                        name: '作业完成率',
                        type: 'line',
                        yAxisIndex: 1,
                        smooth: true,
                        data: this.homeWorkObj.finishRate
                    }
                ]
            });
        }
    }
};
</script>
